<script setup lang="ts">
import { ElMessage, type ElTable } from 'element-plus'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { timeFormat, filterByKey, filterByPrefix } from '@/utils/publicMethods'
import { getCloudDataApi } from '@/api/cloudNetworkSecurity'
import { usePageInfoStore } from '@/stores/index'
const route = useRoute()
// console.log(useRouter())

const stores = usePageInfoStore()
const loading = ref(false)
const singleTableRef = ref<InstanceType<typeof ElTable>>()
const tableList = ref<any>([])
const infoForm = ref({
  YYYY: '',
  MM: timeFormat(new Date()).MM,
  userId: '',
  page: 1,
  rows: 20,
  total: 0
})
const getDataInfo = async () => {
  const params = {
    sqlId: 'cloudGuard.getJfxqInfo',
    sqlParam: JSON.stringify({
      date: `${infoForm.value.YYYY || stores.cloudInfo.data}-${infoForm.value.MM}`,
      // date: String('2024-03'),
      userId: infoForm.value.userId || stores.cloudInfo.userId
    }),
    pagination: true,
    dbName: 'doris',
    debug: 0,
    page: infoForm.value.page,
    rows: infoForm.value.rows
  }
  await getCloudDataApi(params).then((res: any) => {
    // console.log(res)
    tableList.value = res.rows
    infoForm.value.total = res.total
    // singleTableRef.value!.clearSelection()
    if (tableList.value.length === 0) {
      ElMessage({ message: '本月无相关数据', type: 'info' })
    }
    try {
      singleTableRef.value!.setCurrentRow(tableList.value[0])
    } catch (error) {
      console.log(error)
    }
  })
}
// 获取月数据
const monthData = ref<any>([])
// 总分
const totalScore = ref<any>([])
const getMonthData = async () => {
  const params = {
    sqlId: 'cloudGuard.getGrjfTotalSum',
    sqlParam: JSON.stringify({
      date: infoForm.value.YYYY || stores.cloudInfo.data,
      userId: infoForm.value.userId || stores.cloudInfo.userId
    }),
    dbName: 'doris',
    debug: 0
  }
  await getCloudDataApi(params).then((res: any) => {
    monthData.value = res.rows
    totalScore.value = res.rows.reduce((sum: any, obj: any) => sum + obj.total_score, 0)
  })
}
const active = ref(timeFormat(new Date()).MM)
const handleSelect = (item: any) => {
  active.value = item
  if (item > 0 && item < 10) {
    infoForm.value.MM = item.toString().padStart(2, '0')
  } else {
    infoForm.value.MM = item
  }
  getDataInfo()
}

const orderTitle = ref<any>('')
const detailsArry = ref<any>([])
const splitObject = (obj: any) => {
  const keys = Object.keys(obj)
  const ids = keys.filter((key) => key.startsWith('programme_assess_id'))

  return Number(ids.length)
}
const handleCurrentChange = (val: any) => {
  detailsArry.value = []
  orderTitle.value = ''
  // 详情信息
  const detailsInfo2 = filterByKey(val, 'programme_assess')
  const info = splitObject(detailsInfo2)
  for (let i = 0; i < info; i++) {
    detailsArry.value.push(detailsInfo2)
  }
  const detailsInfo1 = filterByKey(val, 'programme_create')
  const detailsInfo3 = filterByKey(val, 'operate_review')
  const detailsInfo4 = filterByKey(val, 'operate_check')
  const detailsInfo5 = filterByKey(val, 'change_test')
  const obj1 = filterByKey(val, 'operate')
  const obj2 = filterByPrefix(obj1, 'operate_review')
  const detailsInfo6 = filterByPrefix(obj2, 'operate_check')
  orderTitle.value = val.order_title
  detailsArry.value.push(detailsInfo1, detailsInfo3, detailsInfo4, detailsInfo5, detailsInfo6)

  // console.log('0000', val)
}

const sizeChange = (val: number) => {
  infoForm.value.page = 1
  infoForm.value.rows = val
  getDataInfo()
}

const currentChange = (val: number) => {
  infoForm.value.page = val
  getDataInfo()
}

onMounted(() => {
  // console.log('GeRenJiFenDetails', route)
  if (route.query.userId) {
    stores.setCloudInfo(route.query)
  }

  getMonthData()
  getDataInfo()
})
</script>
<template>
  <div class="GeRenJiFenDetails">
    <div class="detailsLeft">
      <div class="rankBoxTop">{{ stores.cloudInfo.userName }} 的积分详情</div>
      <div class="rankBoxTitle">
        <div class="monthTitle">月份</div>
        <div class="scoreTitle">积分</div>
      </div>
      <div class="rankBox">
        <el-scrollbar class="rankBoxScroll">
          <div
            class="rankItem"
            v-for="(item, index) in monthData"
            :key="index + 1"
            :class="active === index + 1 ? 'activeClass' : '  '"
            @click="handleSelect(index + 1)"
          >
            <div class="month">{{ index + 1 }}月</div>
            <div class="score">{{ item.total_score }}</div>
          </div>
          <div class="totalScoreBox">
            <div class="titleBox">累计总分</div>
            <div class="totalScore">{{ totalScore }}</div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <div class="detailsCon">
      <el-table
        ref="singleTableRef"
        class="TableBox"
        v-loading="loading"
        highlight-current-row
        :data="tableList"
        border
        style="width: 100%"
        @current-change="handleCurrentChange"
      >
        <el-table-column prop="order_title" label="工单标题" />
        <el-table-column prop="complete_time" label="时间" width="180" />
        <el-table-column prop="operate_total_score" label="得分" width="60" align="center" />
      </el-table>
      <el-pagination
        class="paginationBox"
        v-model:current-page="infoForm.page"
        v-model:page-size="infoForm.rows"
        :page-sizes="[10, 20, 30, 40]"
        size="default"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="infoForm.total"
        @size-change="sizeChange"
        @current-change="currentChange"
      >
      </el-pagination>
    </div>
    <div class="detailsRight">
      <div class="workOrderBoxTop">{{ orderTitle }} 详情</div>
      <div class="workOrderBox">
        <div class="link">环节</div>
        <div class="option">操作</div>
        <div class="score">得分</div>
      </div>
      <div class="workOrderItem" v-for="(item, index) in detailsArry" :key="index">
        <div class="link" v-if="item.info === 'programme_assess'">方案评审{{ index + 1 }}</div>
        <div class="link" v-if="item.info === 'programme_create'">方案制定</div>
        <div class="link" v-if="item.info === 'operate'">操作实施</div>
        <div class="link" v-if="item.info === 'operate_review'">操作审核</div>
        <div class="link" v-if="item.info === 'change_test'">变更测试</div>
        <div class="link" v-if="item.info === 'operate_check'">操作复核</div>
        <div class="option" :class="item[item.info + '_result'] === '成功' ? 'success' : 'error'">
          {{ item[item.info + '_result'] }}
        </div>
        <div class="score">{{ item[item.info + '_score'] }}</div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
.GeRenJiFenDetails {
  display: grid;
  grid-template-columns: 0.5fr 1fr 0.8fr;
  column-gap: 10px;
  grid-template-areas: 'detailsLeft detailsCon detailsRight';
  height: calc(100% - 72px);
  overflow: hidden;
  .detailsLeft {
    border-right: 1px solid var(--cnac-bgc1);
    grid-area: detailsLeft;
    .rankBoxTop {
      text-align: center;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      font-weight: 600;
      border-bottom: 1px solid var(--cnac-bgc1);
    }
    .rankBoxTitle,
    .rankItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 36px;
      line-height: 36px;
      border-bottom: 1px solid var(--cnac-bgc1);
      .monthTitle {
        flex: 1;
        text-align: center;
      }
      .scoreTitle {
        flex: 1;
        text-align: center;
      }
      .month {
        flex: 1;
        text-align: center;
      }
      .score {
        flex: 1;
        text-align: center;
        border-left: 1px solid var(--cnac-bgc1);
      }
    }
    .rankItem {
      cursor: pointer;
    }
    .rankItem.activeClass {
      color: #fff;
      background-color: var(--cnac-main);
      .score {
        border-left: unset;
      }
    }
    .rankBox {
      height: calc(100vh - 210px);
      overflow: hidden;
      .totalScoreBox {
        text-align: center;
        .titleBox,
        .totalScore {
          height: 36px;
          line-height: 36px;
          border-bottom: 1px solid var(--cnac-bgc1);
        }
        .titleBox {
          font-weight: 600;
        }
      }
    }
  }
  .detailsCon {
    grid-area: detailsCon;
    padding: 4px;
    :deep(.TableBox) {
      height: calc(100vh - 210px);
      .current-row {
        td {
          color: #fff;
          background-color: var(--cnac-main);
          border-right: unset;
        }
      }
    }
  }
  .detailsRight {
    grid-area: detailsRight;
    border: 1px solid var(--cnac-bgc1);
    border-top: unset;
    .workOrderBoxTop {
      padding: 0 10px;
      text-align: left;
      height: auto;
      line-height: 40px;
      max-height: 80px;
      font-size: 18px;
      font-weight: 700;
      border-bottom: 1px solid var(--cnac-bgc1);
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      line-clamp: clamp(0, 2, 2);
    }
    .workOrderBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 36px;
      line-height: 36px;
      border-bottom: 1px solid var(--cnac-bgc1);
      .link {
        width: 120px;
        text-align: center;
      }
      .option {
        flex: 1;
        text-align: center;
        border-left: 1px solid var(--cnac-bgc1);
      }
      .score {
        width: 160px;
        text-align: center;
        border-left: 1px solid var(--cnac-bgc1);
      }
    }
    .workOrderItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 24px;
      font-size: 14px;
      border-bottom: 1px solid var(--cnac-bgc1);
      .link {
        width: 120px;
        text-align: center;
      }
      .option {
        flex: 1;
        padding: 8px;
        text-align: center;
        border-left: 1px solid var(--cnac-bgc1);
        border-right: 1px solid var(--cnac-bgc1);
      }
      .score {
        width: 160px;
        text-align: center;
      }
      .option.success {
        color: var(--cnac-success);
      }
      .option.error {
        color: var(--cnac-error);
      }
    }
  }
}
</style>
